<template>
<div>
  <input type="file" name="file1" @change="checkfile">
  <img :src="img1" style="width: 200px">
  <ul>
  <li v-for="item in imgList" :key="item.name">{{item.name}}</li>
  </ul>
  <button @click="submit">提交</button>
  <div>{{precent}}%</div> <!--切片上传进度-->
</div>
</template>

<script>
import axios from 'axios'
let _fileObj;
let _fileObj2;
export default {
  name: "About",
  data(){
    return{
         img1:"",
      imgList:[],
      precent:'',
    }
  },
  methods:{
    checkfile(e){
      // let file=e.target.files[0];
      // _fileObj=file;
         //   console.log(file);
         //   if(file.size>10*24*24){
         //     alert("文件大小不能超过10M")
         //   }
         // if(file.type==='audio/ogg'){
         //   alert("文件是audio或ogg类型")
         // }
      // let blobslice=new Blob([file]).slice(0,5000);//把文件切割成0到5000位，切割可用来做缩略图，文本预览
      // let fileslice=new File([blobslice],'files1');
      // // console.log(fileslice);
      //
      // let fr=new FileReader();
      // fr.readAsDataURL(fileslice);
      // let that=this;
      // fr.onload=function (){  //要转化完成才能拿到结果
      //    that.img1=fr.result; //这里如果用this会指向fr，不是指向vue，所以要用that存一下
      //    console.log(fr.result);
      // }


      //多文件上传
      // if(e.target.files.length>1){
      //   this.imgList.concat(e.target.files);
      // }else{
      //   this.imgList.push(e.target.files[0]);
      // }


      //切片上传
      _fileObj2=e.target.files[0];
    },

    async submit() {
      // 多文件上传
      // 文件上传有两种方式，1:fromDate搭载Blob文件或File文件传给后端 2.把文件转为base64形式传给后端
      //   let _fromData=new FormData();
      //   this.imgList.forEach((item)=>{
      //   _fromData.append("user","liu");
      //   _fromData.append(item.name+"file",item);
      //   })
      //   axios.post("/xx",_fromData)
      // }

      //切片上传
      let size=2*1024*1024; //每次传2m大小
      let fileSize= _fileObj2.size;
      let current=0;
      // localStorage.setItem(_fileObj2.name,current);//断点续传
      while (current<fileSize){
        let _fromData=new FormData();
        _fromData.append(_fileObj2.name,_fileObj2.slice(current,current+size));
        await axios.post("http://localhost:8086/food/findAllFood",_fromData);
        this.precent=Math.min((current/fileSize)*100,100);
        current+=size;
      }
    }

  }
}

</script>

<style scoped>

</style>